<template>
  <div>
    <el-table
      :data="tableData"
      :span-method="objectSpanMethod"
      border
      style="width: 100%; margin-top: 20px"
    >
      <!--  :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
       row-key="id" -->
      <el-table-column
        prop="id"
        label="ID"
        width="180"
      > </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
      > </el-table-column>
      <el-table-column
        prop="amount1"
        label="数值 1（元）"
      > </el-table-column>
      <el-table-column type="expand">

      </el-table-column>

      <el-table-column
        prop="amount2"
        label="操作 操作"
      >
        <template slot-scope="scope">
          <el-radio-group v-model="scope.row.radio">
            <el-radio :label="1">备选项</el-radio>
            <el-radio :label="2">备选项</el-radio>
            <el-radio :label="3">备选项</el-radio>
          </el-radio-group>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="amount3" label="数值 3（元）"> </el-table-column> -->
    </el-table>

    <div>
      <!-- colspan:所在单元格占几列 -->
      <!-- rowspan:所在单元格占几行 -->
      <table
        border="1"
        style=""
      >
        <tr>
          <th>xx</th>
          <!-- <th rowspan="2">名称</th> -->
          <th colspan="2">名称</th>
          <th>官网</th>
          <th>性质</th>
        </tr>
        <tr>
          <td rowspan="3">http://c.biancheng.net/</td>
          <td>教育</td>
        </tr>
        <tr>
          <td colspan="2">http://www.baidu.com/</td>
          <!-- <td>教育</td> -->
        </tr>
        <tr>
          <td>http://www.dangdang.com/</td>
          <td>图书</td>
          <td>图书</td>
        </tr>
      </table>
    </div>
    <div style="width:200px height:200px">
      <td class="xxx"></td>
    </div>
    <div></div>
    <div id="editor" class="edit">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editor"
        :defaultConfig="toolbarConfig"
        :mode="mode"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="logContent"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="onCreated"
        @onChange="onChange"
      />
    </div>
  </div>
</template>

<script>
import E from "wangeditor";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { DomEditor } from "@wangeditor/editor";
export default {
  name: '',
  components: {},
  props: {},
  data() {
    return {
      tableData: [
        {
          id: '12987122',
          name: '王小虎',
          amount1: '234',
          amount2: '3.2',
          amount3: 10,
          radio: 2,
        },
        {
          id: '12987123',
          name: '王小虎',
          amount1: '165',
          amount2: '4.43',
          amount3: 12,
          radio: 3,
        },
        {
          id: '12987123',
          name: '王小虎',
          amount1: '324',
          amount2: '1.9',
          amount3: 9,
          radio: 2,
        },
        {
          id: '12987125',
          name: '王小虎',
          amount1: '621',
          amount2: '2.2',
          amount3: 17,
          radio: 2,
          children: [
            {
              id: '12987123',
              name: '王小虎',
              amount1: '324',
              amount2: '1.9',
              amount3: 9,
              radio: 2,
            },
          ],
        },
        {
          id: '12987126',
          name: '王小虎',
          amount1: '539',
          amount2: '4.1',
          amount3: 15,
          radio: 3,
        },
      ],
      spanArr: [],
      pos: '',
      tableDatas: [
        {
          date: 'pc端',
          name: '村社信息审核',
        },
        {
          date: '钉钉端',
          name: '人员数据',
        },
      ],

      toolbarConfig: {
        toolbarKeys: ["insertLink", "fontSize", "color"],
      },
      logContent: '',
      editorConfig: { placeholder: "请输入内容..." },
      mode: "simple", // or 'simple'
      editor: null,
    };
  },
  computed: {
    Editor,
    Toolbar,
  },
  watch: {},
  created() { },
  mounted() {
    this.getSpanArr(this.tableData);
    /* 富文本编辑器 */
    var editor = new E('#editor')
    // 或者 var editor = new E(document.getElementById('editor'))
    //事实上传入类名也是可以的var editor = new E(document.getElementsByClassName(editor))
    //应该document.getElement开头的都可以但是一般没人这么干
    editor.create()
  },
  methods: {
    editorConfigTam(e) {
      return { placeholder: "请输入内容...", readOnly: e };
    },
    onChange(e) {
      console.log("e  ------>>", this.logContent);
    },
    onCreated(editor) {
      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
      console.log("this.editor  ------>>", this.editor.getConfig().toolbarKeys);
      console.log("  ------>>", this.editor.getAllMenuKeys());
    },
    // 处理表格数据
    getSpanArr(data) {
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1);
          this.pos = 0;
        } else {
          // 判断当前元素与上一个元素是否相同  id（id字段）
          if (data[i].id === data[i - 1].id) {
            this.spanArr[this.pos] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            this.pos = i;
          }
        }
      }
    },
    // 合并单元格
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        console.log(`rowspan:${_row} colspan:${_col}`);
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    },
  },
};
</script>

<style scoped>
table {
  border-collapse: collapse;
  border-color: red;
  color: red;
}
td:hover {
  cursor: pointer;
  background: blue;
}
.xxx {
  border-top: 200px #199fff solid; /*上边框宽度等于表格第一行行高*/
  border-left: 200px #ff8838 solid;
  /* border-right: 200px #ff8838 solid; */
}
::v-deep .undefined {
  border-right-color: transparent;
}
</style>
